<template>
  <el-dialog title="查找测试者" :visible.sync="dialogformvisible" class="tester-list" :destroy-on-close="true" @close="closeDialog('ruleForm')">
    <div class="content">
      <div class="menus">
        <ul class="menu-list">
          <li v-for="(item,index) in menulist" @click="defaultMenuIndex = index" :class="{ currentMenu: defaultMenuIndex === index}">{{item}}</li>
        </ul>
        <span @click="isShowConditions=!isShowConditions" class="filter-button">高级筛选 &ensp;<i :class="[isShowConditions?'el-icon-arrow-up':'el-icon-arrow-down']"></i></span>
        <el-input v-model="searchValue" placeholder="请输入手机号/邮箱账号"  size="small" class="search-input"></el-input>
        <el-button type="primary"  size="small">&emsp;搜索&emsp;</el-button>
      </div>
      <el-form :mode="conditions" class="conditions" label-position="left" label-width="90px" v-if="isShowConditions"> 
        <el-form-item label="测试设备：">
          <el-col :span="3"><el-checkbox v-model="checkAllEquipments" @change="handleCheckAllChange($event,'checkedEquipments','equipments')">不限</el-checkbox></el-col>
          <el-col  :span="21">
            <el-checkbox-group v-model="checkedEquipments" @change="handleCheckedItemChange($event,'checkAllEquipments','equipments')">
              <el-checkbox v-for="item in conditions.equipments" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
        <el-form-item label="测试类型：">
          <el-col :span="3"><el-checkbox v-model="checkAllTypes" @change="handleCheckAllChange($event,'checkedTypes','types')">不限</el-checkbox></el-col>
          <el-col  :span="21">
            <el-checkbox-group v-model="checkedTypes" @change="handleCheckedItemChange($event,'checkAllTypes','types')">
              <el-checkbox v-for="item in conditions.types" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
        <el-form-item label="擅长语言：">
          <el-col :span="3"><el-checkbox v-model="checkAllLanguages" @change="handleCheckAllChange($event,'checkedLanguages','languages')">不限</el-checkbox></el-col>
          <el-col  :span="21">
            <el-checkbox-group v-model="checkedLanguages" @change="handleCheckedItemChange($event,'checkAllLanguages','languages')">
              <el-checkbox v-for="item in conditions.languages" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
        <el-form-item label="测试经验：" class="experience">
          <el-radio-group v-model="checkedTime" class="time">
            <el-radio :label="item" v-for="(item,index) in conditions.time">{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所在地区：">
          <el-col :span="3"><el-checkbox v-model="checkAllRegions" @change="handleCheckAllChange($event,'checkedRegions','regions')">不限</el-checkbox></el-col>
          <el-col  :span="21">
            <el-checkbox-group v-model="checkedRegions" @change="handleCheckedItemChange($event,'checkAllRegions','regions')">
              <el-checkbox v-for="item in conditions.regions" :label="item" :key="item">{{item}}</el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
      </el-form>
      <div class="testers-show-area">
        <el-checkbox-group v-model="checkedTester" @change="handleCheckedTesterChange" v-if="testerData">
          <el-checkbox v-for="tester in testerData" :label="tester.id" :key="tester.id" border :class="[checkedTester.includes(tester.id)?['tester-item','is-selected']:'tester-item']">
            <div class="top-info">
              <img :src="tester.avatorUrl">
              <div class="right-info">
                <h5>{{tester.email}}</h5>
                <p>{{tester.region}}</p>
              </div>
            </div>
            <div class="tags">
              <el-tag>{{tester.tags.time}}</el-tag>
              <el-tag type="success" v-for="equipment in tester.tags.equipments" :key="equipment">{{equipment}}</el-tag>
              <el-tag type="info" v-for="typeItem in tester.tags.types" :key="typeItem">{{typeItem}}</el-tag>
              <el-tag type="warning" v-for="language in tester.tags.languages" :key="language">{{language}}</el-tag>
            </div>
          </el-checkbox>
        </el-checkbox-group>
        <el-empty :image-size="200" v-else style="width: 100%;"></el-empty>
      </div>

    </div>
    <div slot="footer" class="dialog-footer">
      <el-checkbox v-model="checkAllTester" @change="handleCheckAllTesterChange" class="select-all-testers">全选</el-checkbox>
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="invite">批量邀请</el-button>
    </div>
  </el-dialog>
</template>

<script>
  // 注意：httpVueLoader.js使用props传递参数时，需要参数名称全部小写（大小写混合情况，只能通过this.$attrs获取到属性值，但是不能建立props）
  module.exports = {
    props: {
      dialogformvisible: Boolean
    },
    data: function () {
      return {
        menulist: [ '默认', '等级', '能力指数', '参与项目数量'],
        defaultMenuIndex: 0,
        searchValue:'',
        checkAllEquipments: false,
        checkAllTypes: false,
        checkAllLanguages: false,
        checkAllRegions: false,
        checkedEquipments: ['iOS系统', 'Android系统'],
        checkedTypes: [],
        checkedLanguages: [],
        checkedTime: '',
        checkedRegions: [],
        conditions: { 
          equipments: ['iOS系统', 'Android系统', 'Web网站'],
          types: ['功能测试', '安全性测试', '兼容性测试', '性能测试'],
          languages: ['Java', 'C', 'C++', 'C#', 'Object-C', 'Python', 'Ruby', 'JavaScript', 'PHP', '其他' ],
          time: ['不限','1年以下', '1年', '2年', '3年', '4年', '5年', '6年', '7年', '8年', '9年', '10年及以上' ],
          regions: [ '北京', '上海', '天津', '重庆', '河北', '山西', '吉林', '辽宁', '陕西', '甘肃', '青海', '山东', '福建', '浙江', '台湾', '河南', '湖北', '湖南', '江西', '江苏', '安徽', '广东', '海南', '四川', '贵州', '云南', '新疆', '宁夏', '广西', '西藏', '黑龙江', '内蒙古', '香港', '澳门' ]
        },
        isShowConditions: true,
        checkAllTester: false,
        checkedTester: ['rf13e133e13000','rf13e133e13001'],
        testerData:[
          {
            id:'rf13e133e13000',
            avatorUrl:'https://img2.baidu.com/it/u=430334000,1441640885&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e13001',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.dtstatic.com%2Fuploads%2Fblog%2F202101%2F11%2F20210111220519_7da89.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.dtstatic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=e0fe2af815ae8316b22ee11d6ea02dd2',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e13002',
            avatorUrl:'https://pics4.baidu.com/feed/f9198618367adab4f8e1f0ac29e56f1b8601e4e2.jpeg?token=2533109e8ce6245ef7fb62ccd92f8c1a&s=0090CD32DA7077BD260C71C90300E0A2',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e13003',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F27%2F20210627172214_c6be1.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=1904a3294f0fae808dc299b9e11b6e82',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e13004',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F14%2F20210614060633_74f83.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=8fa150afb0ea04f4799601902dc14a7a',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS'],
              types:['功能测试'],
              languages: ['Java']
            }
          },
          {
            id:'rf13e133e13005',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-12%2F2020122121391376028.png&refer=http%3A%2F%2Ftupian.qqw21.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=f25c6f63873888a087aa48ce8e18fd6e',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e13006',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-12%2F2020122121391376028.png&refer=http%3A%2F%2Ftupian.qqw21.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=f25c6f63873888a087aa48ce8e18fd6e',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e13007',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-12%2F2020122121391376028.png&refer=http%3A%2F%2Ftupian.qqw21.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=f25c6f63873888a087aa48ce8e18fd6e',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e13008',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-12%2F2020122121391376028.png&refer=http%3A%2F%2Ftupian.qqw21.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=f25c6f63873888a087aa48ce8e18fd6e',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e13009',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-12%2F2020122121391376028.png&refer=http%3A%2F%2Ftupian.qqw21.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=f25c6f63873888a087aa48ce8e18fd6e',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          },
          {
            id:'rf13e133e130010',
            avatorUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftupian.qqw21.com%2Farticle%2FUploadPic%2F2020-12%2F2020122121391376028.png&refer=http%3A%2F%2Ftupian.qqw21.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673753126&t=f25c6f63873888a087aa48ce8e18fd6e',
            email:'123456789@qq.com',
            region:'上海市',
            tags:{
              time:'3年',
              equipments:['iOS','Android'],
              types:['功能测试', '安全性测试', '兼容性测试'],
              languages: ['Java', 'C', 'C++']
            }
          }
        ]
      };
    },
    created: function () { },
    methods: {
      cancel(){
        this.$emit("closedialog");
      },

      closeDialog(){
        this.$emit("closedialog");
      },

      // 全选/取消全选
      handleCheckAllChange(val, checkedItems, allItems) {
        this[checkedItems] = val ? this.conditions[allItems] : [];
      },

      // 多选的单项操作：选中/取消
      handleCheckedItemChange(value, checkAllItems, allItems) {
        let checkedCount = value.length;
        this[checkAllItems] = checkedCount === this.conditions[allItems].length;
      },

      // 取出测试者的 id 组成新数组
      getTesterIdArray(){
        let testerIdArr = []
        for(let item of this.testerData){
          testerIdArr.push(item.id)
        }
        return testerIdArr
      },


      // 测试者全选/取消全选
      handleCheckAllTesterChange(val){
        let testerIdArr = this.getTesterIdArray()
        this.checkedTester = val ? testerIdArr : [];
      },

      // 多选的单项操作：选中/取消
      handleCheckedTesterChange(val) {
        let testerIdArr = this.getTesterIdArray()
        let checkedCount = val.length;
        this.checkAllTester = checkedCount === testerIdArr.length;
      },

      // 批量邀请
      invite(){
        if(this.checkedTester.length==0){
          this.$message({
            message: '请选择要邀请的用户!',
            type: 'warning'
          });
        }else{
          this.$message({
            message: '恭喜你，邀请成功！',
            type: 'success'
          });
          this.$emit("closedialog");
        }
      }
    }
  }
</script>

<style scoped>
  .el-dialog__header {
    padding: 20px;
    border-bottom: 1px solid #e1e4e5;
  }

  .el-dialog__body {
    padding: 10px 20px 20px;
  }

  .content{
    width: 100%;
    height: 520px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .menus{
    display: flex;
    align-items: center;
  }

  .menu-list{
    display: flex;
  }
  
  .menu-list>li{
    margin-right: 36px;
    cursor: pointer;
  }

  .menu-list>li.currentMenu{
    color:#409EFF;
  }

  .filter-button{
    cursor: pointer;
  }

  .search-input{
    flex: 1;
    margin: 0 46px;
  }

  .conditions{
    width: 100%;
    margin-top: 10px;
    border: 1px solid #e1e4e5;
    border-radius: 5px;
    padding: 0 0 5px;
    box-sizing: border-box;
  }

  .conditions .el-form-item{
    margin-bottom: 0;
    padding: 0 20px;
    border-bottom: 1px dashed #e1e4e5;
  }

  .conditions .el-form-item:last-child{
    border-bottom: none;
  }

  .conditions .el-form-item .el-form-item__content {
    line-height: 23px;
    margin-top: 8px;
  }

  .el-radio-group{
    margin-top: 6px
  }

  .el-checkbox {
    margin-right: 25px;
  }

  .el-radio{
    margin-right: 10px;
  }

  .selected{
    margin-right: 10px;
    background-color: #409EFF;
    color: #fff;
    padding: 3px;
    border-radius: 20px;
    box-sizing: border-box;
    margin-top: -3px;
  }

  .selected .el-radio__label{
    font-size: 13px;
  }

  .time>.el-radio:nth-child(2){
    margin-left: 26px;
  }

  .time>.el-radio:first-child .el-radio__input {
    display: inline-block;
  }

  .time>.el-radio .el-radio__label{
    padding-left: 10px;
  }

  .testers-show-area{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
    overflow-y: auto;
  }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  .testers-show-area::-webkit-scrollbar{
  width: 4px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.testers-show-area::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.testers-show-area::-webkit-scrollbar-thumb{
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
  background-color: rgba(24, 122, 251, .6);
}

  .testers-show-area .el-checkbox-group{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
  }

  .testers-show-area .el-checkbox-group:after {content: ""; width: 32.5%; }

  .tester-item{
    width: 32%;
    height: auto;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0!important;
    margin-bottom: 10px !important;
    background-color: #fff;
    margin-right: 12px !important;
  }

  .tester-item .el-checkbox__input {
    display: none;
  }

  .tester-item .el-checkbox__label{
    padding-left: 0px;
    width: 100%;
  }

  .tester-item.el-checkbox.is-bordered {
    padding: 10px !important;
  }

  .top-info{
    display: flex;
    align-items: center;
  }

  .top-info img{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 20px;
  }

  .right-info h5{
    font-weight: 600;
  }

  .right-info p{
    font-size: 12px;
  }

  .tags{
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .tags .el-tag {
    height: 26px;
    line-height: 24px;
    margin-right: 4px;
    margin-bottom: 4px;
}

  .el-dialog__footer{
    border-top: 1px solid #e1e4e5;
    padding: 20px;
  }

  .dialog-footer{
    display: flex;
    align-items: center;
  }

  .select-all-testers{
    flex: 1;
    text-align: left;
  }

  .tester-item.is-selected {
    background: url(../images/selected.png) no-repeat top right;
  }


</style>